<template>
    <div id="background">
        <el-container>
            <el-header id="examHead">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize">电工测试</span>
                    </el-col>
                    <el-col :xs="1" :sm="1" :md="1" :offset="4" class="imgCol">
                        <!-- <i class="el-icon-s-flag" style="color:#fff"></i> -->
                        <img v-show="!currentTiMuInfo.biaoJi" v-bind:src="biaoJiIcon" style="height:14px" @click="setFlag"/>
                        <i v-show="currentTiMuInfo.biaoJi" class="el-icon-close" style="color:#ffffff" @click="cancleFlag"></i>
                    </el-col>
                    <el-col :xs="1" :sm="1" :md="1" :offset="2" class="imgCol">
                        <!-- <i class="el-icon-share" style="color:#fff"></i> -->
                        <img v-bind:src="shareIcon"  style="height:14px"/>
                    </el-col>
                 </el-row>
            </el-header>
            <el-main id="examMain" style="backgroundColor:#ffffff">
                <el-row type="flex" style="margin-top:30px">
                    <el-col :xs="2" :sm="2" :md="2" :offset="2">
                       <img v-bind:src="answerIcon" class="backSize" @click="cardShow = true"/> 
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="1">
                        <span class="words">{{tiMuInfo.questionScore}}分</span>
                    </el-col>
                    <el-col :xs="2" :sm="2" :md="2" :offset="4">
                        <img v-bind:src="timeIcom" class="backSize"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="1" >
                        <span class="words">{{count.hr}}'{{count.min}}'{{count.sec}}'</span>
                       
                    </el-col>
                </el-row>
                <el-card class="examCard">
                    <el-row class="ceshiType">
                        <el-col>
                            {{currentTiMuInfo.questionType}}
                        </el-col>
                    </el-row>
                    <div v-if="currentTiMuInfo.questionType=='单选'">
                        
                        <el-row style="margin-bottom:10px">
                            <span class="examWords">{{currentTiMuInfo.index+1}}.{{tiMuInfo.questionText}}</span>
                        </el-row>
                        <van-radio-group v-model="radio" @change="remeberanswer">
                            <van-radio name="A" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>{{tiMuInfo.optionCode[0]}}.{{tiMuInfo.optionText[0]}}</span>
                            </van-radio>
                            <van-radio name="B" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>{{tiMuInfo.optionCode[1]}}.{{tiMuInfo.optionText[1]}}</span>
                            </van-radio>
                            <van-radio name="C" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">  
                                <span>{{tiMuInfo.optionCode[2]}}.{{tiMuInfo.optionText[2]}}</span>
                            </van-radio>
                            <van-radio name="D" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>{{tiMuInfo.optionCode[3]}}.{{tiMuInfo.optionText[3]}}</span>
                            </van-radio>
                        </van-radio-group>
                            
                    </div>
                    <div v-if="currentTiMuInfo.questionType=='判断'">
                        <el-row style="margin-bottom:10px">
                            <span class="examWords">{{currentTiMuInfo.index+1}}.{{tiMuInfo.questionText}}</span>
                        </el-row>
                        <van-radio-group v-model="panDuan" @change="remeberanswer">
                            <van-radio name=true checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>对</span>
                            </van-radio>
                            <van-radio name=false checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>错</span>
                            </van-radio>
                        </van-radio-group>
                    </div>
                    <div v-if="currentTiMuInfo.questionType=='多选'">
                        <el-row style="margin-bottom:10px">
                            <span class="examWords">{{currentTiMuInfo.index+1}}.{{tiMuInfo.questionText}}</span>
                        </el-row>
                        <van-checkbox-group v-model="checkBoxs" @change="remeberanswer">
                            <van-checkbox  name="A" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>{{tiMuInfo.optionCode[0]}}.{{tiMuInfo.optionText[0]}}</span>
                            </van-checkbox>
                             <van-checkbox  name="B" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>{{tiMuInfo.optionCode[1]}}.{{tiMuInfo.optionText[1]}}</span>
                            </van-checkbox>
                             <van-checkbox  name="C" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>{{tiMuInfo.optionCode[2]}}.{{tiMuInfo.optionText[2]}}</span>
                            </van-checkbox>
                             <van-checkbox  name="D" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                                <span>{{tiMuInfo.optionCode[3]}}.{{tiMuInfo.optionText[3]}}</span>
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
           
                </el-card>
                <van-popup v-model="cardShow" position="bottom" :style="{ height: '60%' }">
                    <div v-for="(tiMu,index) in tiMus" :key="index" >
                        <div>        
                            <el-col :xs="23" :sm="23" :md="23" :offset="1">
                                <div class="tiMuTitle">{{tiMu.type}}</div>
                            </el-col>
                        </div>
                        <div v-for="tiHao in tiMu.tiHao" :key="tiHao.num" @click="goToThisTiMu(tiHao.num,tiMu.type)">
                            <el-col :xs="4" :sm="4" :md="4" class="imgCol">
                                <div v-show="tiHao.status" class="tiHaoCompelet imgCol">
                                    <div>
                                        <span>{{tiHao.num}}</span>
                                        <img v-show="tiHao.biaoJi" v-bind:src="biaoJiIcon" style="height:10px;float:right" />
                                    </div>
                                </div>
                                <div v-show="!tiHao.status" class="tiHaoNormal imgCol">
                                    <div>
                                        <span>{{tiHao.num}}</span>
                                        <img v-show="tiHao.biaoJi" v-bind:src="biaoJiBlue" style="height:10px;float:right;color:#53cdf5" />
                                    </div>
                                </div>
                            </el-col>
                        </div>
                    </div>
                </van-popup>

            <van-popup v-model="show" style="backgroundColor:rgb(255,255,255,0)"><van-loading type="spinner" /></van-popup>
            </el-main>
            <el-footer id="shiCaoIntroduceFoot">
                <el-row style="position:fixed;bottom:100px;width:100%" type="flex">
                        <el-col :xs="10" :sm="10" :md="10"  class="imgCol" >
                            <span style="color:#53cdf5" @click="goToLastTiMu">上一题</span>
                        </el-col>
                        <el-col :xs="4" :sm="4" :md="4" class="imgCol">
                             <el-divider direction="vertical"></el-divider>
                        </el-col >
                        <el-col :xs="10" :sm="10" :md="10" class="imgCol"  >
                            <span style="color:#53cdf5" @click="goToNextTiMu">下一题</span>
                        </el-col>
                </el-row>
                <el-row type="flex" class="imgCol" style="position:fixed;bottom:10px;width:100%">
                    
                    <button class="btnSubmit" @click="resureSubmit">提交</button>
                </el-row>
            </el-footer>
        </el-container>

    </div>
    
</template>
<script>
import backIcon from '../../../assets/img/mine/geRenZhongXin/back.png'
import answerIcon from '../../../assets/img/tiKu/exam/answerIcon.png'
import biaoJiIcon from '../../../assets/img/tiKu/exam/biaoJi.png'
import biaoJiBlue from '../../../assets/img/tiKu/exam/biaoJiBlue.png'
import shareIcon from '../../../assets/img/tiKu/exam/share.png'
import timeIcom from '../../../assets/img/tiKu/exam/time.png'
import { Toast,Dialog,Overlay } from 'vant';
import { setTimeout } from 'timers';

export default {
    data(){
        return{
            
            show:false,
            //绑定用户的得分
            score:'',
            //绑定用户的答题情况
            judgeAnswer:[],
            //绑定当前题目信息
            tiMuInfo:{
                questionScore:0,
                optionCode:[],
                optionText:[],
                questionText:'',
            },
            //绑定当前题目的类型和下标
            currentTiMuInfo:{
                //绑定当前题目类型下的数量
                size:'',
                //绑定当前题目在该题型下的下标
                index:'',
                questionType:'',
                //绑定题目类型的下标
                questionIndex:'',
                biaoJi:false,
                //记录用户做过的题目数量
                count:0,
                //记录该套题目的总题数
                allCount:0
            },
            //绑定该套测试的id
            testId:'',
            count:{
                hr: 0, 
                min: 0, 
                sec: 0,
                allsec :0,
                originAllsec:0,
            }, 
            cardShow:false,
            //绑定答案
            radio:'',
            panDuan:'',
            checkBoxs:[],
            //用于记录用户的答案
            // answerRadio:[],
            // answerCheckBox:[],
            // answerPanDuan:[],
            answer:{},
            content:'提交答案后不可更改，系统自动计算分数，是否继续提交？',
            content2:'您还有未完成的题目，是否继续提交？',
            backIcon:backIcon,
            answerIcon:answerIcon,
            biaoJiIcon:biaoJiIcon,
            biaoJiBlue:biaoJiBlue,
            shareIcon:shareIcon,
            timeIcom:timeIcom,
            normalHeight:document.documentElement.clientHeight,
            tiMus:[],
        }
    },
    mounted(){     
        this.count.allsec=this.$route.query.time;
        this.count.originAllsec=this.$route.query.time;
        this.testId=this.$route.query.testId;
       
        this.countDown();
        this.getExamCountAndType();

        var normalHeight=sessionStorage.getItem('normalHeight');
        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("examHead");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        
        var main=document.getElementById("examMain");
        var mainHeight=normalHeight/30 *22 ;
        console.log("mainHeight:"+mainHeight);
        main.style.height=mainHeight+"px";

        // var foot=document.getElementById("examFoot");
        // var footHeight=normalHeight/30 *3 ;
        // console.log("footHeight:"+footHeight);
        // foot.style.height=footHeight+"px";


    },
    methods:{
         showPopup() {
      this.show = true;
    },
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        //点击提交弹出弹窗
        resureSubmit(){
            var msg='';
            this.currentTiMuInfo.count=0;
            var i=0,j=0;
            for(i=0;i<this.tiMus.length;i++){
                for(j=0;j<this.tiMus[i].tiHao.length;j++){
                    if(this.tiMus[i].tiHao[j].status===1){
                        this.currentTiMuInfo.count++;
                    }
                }
            }
            if(this.currentTiMuInfo.count>=this.currentTiMuInfo.allCount){
                msg=this.content;
            }else{
                msg=this.content2;
            }
            // console.log(this.currentTiMuInfo.allCount);
            Dialog.confirm({
                message:msg
            }).then(() => {
                        this.show=true;
                // on confirm
                var questions=[],i='';
                // for(i=0;i<this.answerRadio.length;i++){
                //     questions.push(this.answerRadio[i]);
                // }
                // for(i=0;i<this.answerCheckBox.length;i++){
                //     questions.push(this.answerCheckBox[i]);
                // }
                // for(i=0;i<this.answerPanDuan.length;i++){
                //     questions.push(this.answerPanDuan[i]);
                // }
              for(var key in this.answer){
                  for(i=0;i<this.answer[key].length;i++){
                      questions.push(this.answer[key][i]);
                  }
              }
                console.log("questions:");
                console.log(questions);
               this.submitAllanswer(questions);
            
            }).catch(() => {
                // on cancel
            });
        },
        //查看答题卡情况
        checkanswerCard(){
            this.$router.push({
                path:'/tiKu/examanswerCard'
            })
        },
        //测验倒计时
        countDown(){
            // console.log("countDown");
            // console.log(this.count.allsec);
            let hr = parseInt(this.count.allsec / 3600);
            let min = parseInt(this.count.allsec %3600 / 60);
            let sec = parseInt(this.count.allsec %3600 % 60);
            // console.log(hr+" "+min+" "+sec);
            this.count.hr = hr > 9 ? hr : '0' + hr;
            this.count.min = min > 9 ? min : '0' + min;
            this.count.sec = sec > 9 ? sec : '0' + sec;
            let clock=setTimeout(()=>{
                if(this.count.allsec>0){
                    this.count.allsec-=1;
                    this.countDown();
                }else{
                    clearTimeout(clock);
                    this.count.allsec=0;
                }
            },1000);
        },
        //根据testId获取所有题目数量和类型
        getExamCountAndType(){
            var URL=this.IP.IP+'/test/theBlockOfTest';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                   testId:this.testId
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code===0){
                //    this.tiMus=response.data.data;
                    var tiMus=response.data.data;
                    var i=0,k=0;
                    for(i=0;i<tiMus.length;i++){
                        if(tiMus[i].questionSize!==0){
                            this.tiMus[k]={
                                id:k,
                                size:tiMus[i].questionSize,
                                type:tiMus[i].questionType,
                                tiHao:[],
                            }
                            var j=0;
                             this.answer[tiMus[i].questionType]=[];
                            for(j=0;j<tiMus[i].questionSize;j++){
                                this.tiMus[k].tiHao.push(
                                    {
                                        num:j+1,
                                        status:0,
                                        biaoJi:false,
                                    }
                                )
                                // this.answer[tiMus[i].questionType].push({
                                //     index:j,
                                //     questionType:tiMus[i].questionType,
                                //     userQuestionAnswer:[]
                                // })
                               this.answer[tiMus[i].questionType].push({
                                    index:j,
                                    questionType:tiMus[i].questionType,
                                    userQuestionAnswer:[]
                               })
                            }
                            k++;
                            this.currentTiMuInfo.allCount+=tiMus[i].questionSize;
                         
                        }
          
                    }
                    this.currentTiMuInfo.index=0;
                    this.currentTiMuInfo.questionType=this.tiMus[0].type;
                    this.currentTiMuInfo.size=this.tiMus[0].size;
                    this.currentTiMuInfo.questionIndex=0;
                    this.currentTiMuInfo.biaoJi=this.tiMus[0].tiHao[0].biaoJi;

                   this.getExamTiMu(this.currentTiMuInfo.index,this.currentTiMuInfo.questionType);
                    console.log("题目：");
                    console.log(this.tiMus);
                    console.log(this.currentTiMuInfo);
                    console.log(this.answer);
                    // console.log(this.answer);
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //根据下标和题型获取题目信息
        getExamTiMu(index,type){
             var URL=this.IP.IP+'/test/testQuestion';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                  index:index,
                  questionType:type
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code===0){
                    this.tiMuInfo=response.data.data;
                    //清除上一题的缓存
                    //this.removeanswer();
                    //默认赋值
                    this.judgeMoRen();
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //点击上一题
        goToLastTiMu(){
            console.log("上一题：");
            //this.remeberanswer();
            //当前下标为0，且当前已经是第一种题型时
            if(this.currentTiMuInfo.index===0 && this.currentTiMuInfo.questionIndex===0){
                Toast("已经是第一题了！");
                return;
            }
            //当前下标为0,但前面还有别的题型题目时
            if(this.currentTiMuInfo.index===0){
                this.currentTiMuInfo.questionIndex--;
                this.currentTiMuInfo.index=this.tiMus[this.currentTiMuInfo.questionIndex].size-1;
                this.currentTiMuInfo.questionType=this.tiMus[this.currentTiMuInfo.questionIndex].type;
                this.currentTiMuInfo.size=this.tiMus[this.currentTiMuInfo.questionIndex].size;
                this.currentTiMuInfo.biaoJi=this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].biaoJi;
                console.log(this.currentTiMuInfo);
                this.getExamTiMu(this.currentTiMuInfo.index,this.currentTiMuInfo.questionType);
            }
            //当前下标不为0
            else{
                this.currentTiMuInfo.index--;
                this.currentTiMuInfo.biaoJi=this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].biaoJi;
                console.log(this.currentTiMuInfo);
                this.getExamTiMu(this.currentTiMuInfo.index,this.currentTiMuInfo.questionType);
            }
        },
        //点击下一题
        goToNextTiMu(){
            console.log("下一题：");
            //this.remeberanswer();
            //当前题目已经是最后一个题型的最后一道题目时
            if(this.currentTiMuInfo.index===this.currentTiMuInfo.size-1 && this.currentTiMuInfo.questionIndex===this.tiMus.length-1){
                Toast("已经是最后一题了！");
                return;
            }
            //当前题目时当前题型的最后一个题目了，但是后面还有别的题目时
            if(this.currentTiMuInfo.index===this.currentTiMuInfo.size-1){
                this.currentTiMuInfo.questionIndex++;
                this.currentTiMuInfo.index=0;
                this.currentTiMuInfo.questionType=this.tiMus[this.currentTiMuInfo.questionIndex].type;
                 this.currentTiMuInfo.biaoJi=this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].biaoJi;
                this.currentTiMuInfo.size=this.tiMus[this.currentTiMuInfo.questionIndex].size;
                console.log(this.currentTiMuInfo);
                this.getExamTiMu(this.currentTiMuInfo.index,this.currentTiMuInfo.questionType);

            }
            else{
                this.currentTiMuInfo.index++;
                this.currentTiMuInfo.biaoJi=this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].biaoJi;
                console.log(this.currentTiMuInfo);
                this.getExamTiMu(this.currentTiMuInfo.index,this.currentTiMuInfo.questionType);
            }
          console.log(this.tiMus);
           
        },
        //记录用户的答案
        remeberanswer(answer){
            console.log("remeber:"+answer);
            console.log("radio:"+this.radio);
            // console.log(this.answer);
            if(answer!==undefined || answer!==' ' || answer!==[] || !(answer.isEqual(''))){
                console.log("no undefined");
                if(this.currentTiMuInfo.questionType==='单选') {
                  this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index] = {
                    index: this.currentTiMuInfo.index,
                    questionType: '单选',
                    userQuestionAnswer: [answer]
                  }
                  if (answer !== '' || answer !== undefined) {

                    // console.log(this.radio);
                    console.log("index:"+this.currentTiMuInfo.index+":status：1");
                    this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].status = 1;
                  }
                }
                else if(this.currentTiMuInfo.questionType==='多选'){
                    this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index]={
                        index:this.currentTiMuInfo.index,
                        questionType:'多选',
                        userQuestionAnswer:answer
                    }
                    if(this.checkBoxs.length!==0){
                        this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].status=1;
                    }else{
                        this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].status=0;
                    }
                }
                else if(this.currentTiMuInfo.questionType==='判断'){
                    this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index]={
                        index:this.currentTiMuInfo.index,
                        questionType:'判断',
                        userQuestionAnswer:[answer]
                    }
                    if(this.panDuan!==''){
                        this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].status=1;
                    }
            
                }
                // console.log(this.answer);
            }else{
                console.log("this is undefined");
            }
        },
        //清除题目的缓存答案
        removeanswer(){
            this.radio='';
            this.checkBoxs=[];
            this.panDuan='';
        },
        //判断用户是否选择该题并且附上默认值
        judgeMoRen(){
         
            if(this.currentTiMuInfo.questionType=='单选'){
                console.log("默认单选：")
                // console.log(this.currentTiMuInfo.index);
                console.log(this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index]);
                if(this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index].userQuestionAnswer.length==0){
                    this.radio='';
                }else{
                    // console.log(this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index].userQuestionAnswer);
                    this.radio=this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index].userQuestionAnswer[0];
                }
            
          
            }else if(this.currentTiMuInfo.questionType=='多选'){
                this.checkBoxs=this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index].userQuestionAnswer;
            }else if(this.currentTiMuInfo.questionType=='判断'){
                if(this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index].userQuestionAnswer.length==0){
                    this.panDuan='';
                }else{
                    this.panDuan=this.answer[this.currentTiMuInfo.questionType][this.currentTiMuInfo.index].userQuestionAnswer[0];
                }
                
            }
        },
        //设置标记
        setFlag(){
            console.log("set flag");
            this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].biaoJi=true;
            this.currentTiMuInfo.biaoJi=true;
        },
        //取消标记
        cancleFlag(){
            console.log("cancle flag");
            this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[this.currentTiMuInfo.index].biaoJi=false;
            this.currentTiMuInfo.biaoJi=false;
        },
        //提交测试答案
        submitAllanswer(questions){
            var URL=this.IP.IP+'/test/readTest';
            console.log(URL);
            
            this.$ajax({
                method:'post',
                url:URL,
                data:{
                    questions
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   // Toast(response.data.data);
                    this.score=response.data.data.score;
                    //绑定用户的测试结果情况
                    var judgeAnswer=response.data.data.judgeAnswer;
                    var questionType=response.data.data.questionType;
                    var time=0;
                    time=this.count.originAllsec-this.count.allsec;
                    sessionStorage.setItem('score',this.score);
                    sessionStorage.setItem('time',time);
                    sessionStorage.setItem('judgeAnswer',JSON.stringify(judgeAnswer));
                    sessionStorage.setItem('questionType',JSON.stringify(questionType));
                    sessionStorage.setItem('tiMus',JSON.stringify(this.tiMus));
                    sessionStorage.setItem('answerMap',JSON.stringify(this.answer));
            
                    setTimeout(()=>{
                        this.show=false;
                            this.$router.push({
                            path:'/tiKu/examResult',
                            // query:{
                            //     score:this.score,
                            //     time:time,
                            //     judgeAnswer:judgeAnswer,
                            //     questionType:questionType,
                            //     tiMus:this.tiMus,
                            //     answerMap:this.answer
                            // }

                        })
                    },1000)
                    
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //在答题卡中跳到指定的题目
        goToThisTiMu(index,type){
            console.log("跳题");
            console.log(index);
            console.log(type);
            var i=0;
            for(i=0;i<this.tiMus.length;i++){
                console.log(this.tiMus[i].type);
                if(type==this.tiMus[i].type){
                    this.currentTiMuInfo.questionIndex=i;
                }
            }
            console.log(this.currentTiMuInfo.questionIndex);
            this.currentTiMuInfo.index=index-1;
            this.currentTiMuInfo.questionType=type;
            this.currentTiMuInfo.size=this.tiMus[this.currentTiMuInfo.questionIndex].size;
            this.currentTiMuInfo.biaoJi=this.tiMus[this.currentTiMuInfo.questionIndex].tiHao[index-1].biaoJi;
            console.log(this.currentTiMuInfo);
            this.getExamTiMu(this.currentTiMuInfo.index,type);
            this.cardShow=false;
        }

    }
}
</script>
<style>
.tiMuTitle{
    border: #53cdf5 1px solid;
    background-color: #53cdf5;
    color: #fff;
    border-radius: 5px;
    padding: 5px;   
    height: 20px;
    width: 60px;
    text-align: center;
    margin-top: 20px;
}
.tiHaoCompelet{
    border: #53cdf5 1px solid;
    background-color: #53cdf5;
    color: #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin-top: 15px;
}
.tiHaoNormal{
    border: #53cdf5 1px solid;
    background-color: #fff;
    color: #53cdf5;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin-top: 15px;
}
.overCss{
    width: 100%;
    /* text-overflow: ellipsis; */
    white-space: normal;
    line-height: 1.5;
    white-space: normal;
}
/* .el-radio, .el-radio__input {
    line-height: 1.5;

    white-space: normal;
 
} */
.el-main{
    padding: 0px;
}
.el-header{
    padding: 0px;
}
.el-footer{
    padding: 0px;
}
#examHead{
    background-color: #53cdf5;
    color: #707070;
}
.words{
    color: #707070;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
.examCard{
    margin: 30px;
}
.examWords{
    font-size: 14px;
    margin: 5px;
 
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #53cdf5;
    border-color: #53cdf5;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #53cdf5;
}
.el-radio__input.is-checked+.el-radio__label {
    color: #53cdf5;
}
.el-radio__input.is-checked .el-radio__inner {
    border-color: #53cdf5;
    background: #53cdf5;
}
.van-dialog__confirm, .van-dialog__confirm:active {
    color: #53cdf5;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.btnSubmit{
       background-color: #53cdf5;
    height: 40px;
    width: 60%;
    color: #fff;
    font-size: 1.125em;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    border-style: none;
}
/* .tiMuHeight{
    height: 150px;
} */
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
  /* .tiMuHeight{
      height: 100px;
  } */
}
@media screen and (min-height: 700px){

  /* .tiMuHeight{
      height: 220px;
  } */
}
</style>
